<template>
  <div class="order">
    <div class="top">
      <back></back>
      <div>我的订单</div>
    </div>
    <!-- 订单头 -->
    <van-tabs v-model="active" class="tag">
      <van-tab title="全部">
        <!-- 待使用订单 -->
        <div class="employ" v-for="(item, i) of show_order" :key="i">
          <div>
            <span>{{ item.order_store }}</span>
            <span>{{
              item.status == 2
                ? "待使用"
                : item.status == 1
                ? "待付款"
                : "退款/售后"
            }}</span>
          </div>
          <van-swipe-cell class="pag">
            <van-card
              :num="`${item.order_number}`"
              :price="`总价：${item.order_price}`"
              :desc="`下单时间：${item.order_time}`"
              :title="`${item.order_type}`"
              class="goods-card"
              v-if="item.order_pic"
              :thumb="require(`../assets/produce/${item.order_pic}`)"
            />
            <template #right>
              <van-button
                square
                text="退款"
                type="danger"
                class="delete-button"
                @click="del(item.oid)"
              />
            </template>
          </van-swipe-cell>
        </div>
      </van-tab>
      <van-tab title="待付款"></van-tab>
      <van-tab title="待使用">
        <!-- 待使用订单 -->
        <div class="employ" v-for="(item, i) of show_order" :key="i">
          <div>
            <span>{{ item.order_store }}</span>
            <span>{{
              item.status == 2
                ? "待使用"
                : item.status == 1
                ? "待付款"
                : "退款/售后"
            }}</span>
          </div>
          <van-swipe-cell class="pag">
            <van-card
              :num="`${item.order_number}`"
              :price="`总价：${item.order_price}`"
              :desc="`下单时间：${item.order_time}`"
              :title="`${item.order_type}`"
              class="goods-card"
              v-if="item.order_pic"
              :thumb="require(`../assets/produce/${item.order_pic}`)"
            />
            <template #right>
              <van-button
                square
                text="退款"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </div>
      </van-tab>
      <van-tab title="退款/售后"></van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { Dialog } from "vant";
import { Toast } from 'vant';
Toast.setDefaultOptions({ duration: 4000 });
export default {
  data() {
    return {
      uid: sessionStorage.getItem("uid"),
      active: 0,
      show_order: [],
      image:[]
    };
  },
  methods: {
    showorder() {
      this.axios.get("/swim_order/show/" + this.uid).then((result) => {
        this.show_order = result.data.data;
        let image=result.data.data;
        // `image.forEach((item) => {
        //     item.order_pic = require(`../assets/produce/${item.order_pic}`);
        // });`
      });
    },
    del(oid) {
      Dialog.confirm({
        title: "退款确认",
        message: "确定要退款吗？",
      })
        .then(() => {
          this.axios.delete("/swim_order/del/" + oid).then((result) => {
            Toast.success('已进入退款流程，如退款成功，钱款将原路退回到付款账户');
            this.showorder();
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  mounted() {
    this.showorder();
  },
};
</script>

<style>
.order {
  overflow: hidden;
  background-color: #fafafa;
}
.order .top {
  width: 100%;
  position: fixed;
  top: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 60px;
  background-color: #fdfdfd;
  border-bottom: 1px solid #eee;
  z-index: 10;
}
.order .tag {
  margin: 60px 0 10px 0;
}
/* 订单 */
.order .employ {
  font-size: 14px;
  color: #333;
  background: #fff;
  width: 85%;
  margin: 0 auto;
  padding: 10px;
  border-radius: 10px 10px 0 0;
}
.order .employ > :first-child {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
}
.order .pag {
  text-align: left;
  width: 100%;
  margin: 0 auto;
  border-radius: 0 0 10px 10px;
}

.order .delete-button {
  height: 100%;
}
</style>
